<script setup lang="ts">

import {Card, CardContent, CardFooter, CardHeader, CardTitle} from "~/components/ui/card";
import {Button} from "~/components/ui/button";
import type {TypeAllToursInfo} from "~/utils/client";
import {toast} from "~/components/ui/toast";

const getTours = async () => {
  const {data, error, response} = await client.getTours()
  if (data) {
    tours.value = data
    loaderState.value = false
  }
  if (error) {
    console.log(error)
  }
}

const tours = ref<TypeAllToursInfo>()

const loaderState = ref(true)
const inputSearch = ref<string>('')


const searchedTours = computed(() => {
  return tours.value?.filter(tour =>
      tour.description.toLowerCase().includes(inputSearch.value.toLowerCase())
  )
})

getTours()
</script>

<template>
<Loader :show="loaderState"/>
<main class="container flex-grow flex flex-col justify-start items-center gap-5">
  <h2 class="text-4xl">Все туры</h2>
  <div class="relative w-full items-center">
    <Input v-model="inputSearch" placeholder="Поиск" class="pl-9"/>
    <div class="absolute start-0 inset-y-0 flex items-center justify-center px-3">
      <IconCSS name="line-md:search" size="1.25rem" />
    </div>
  </div>
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-5 w-full" v-auto-animate>
    <Card v-for="tour in searchedTours" :key="tour.id" class="flex flex-col">
      <CardHeader>
        <CardTitle>{{tour.name}}</CardTitle>
      </CardHeader>
      <CardContent class="flex flex-col gap-5">
        <img :src="tour.image" :alt="tour.name" class="aspect-video rounded-xl">
        <p class="line-clamp-3">{{tour.description}}</p>
      </CardContent>
      <CardFooter class="flex-shrink-0 flex-grow flex flex-col justify-end">
        <Button class="w-full" @click="navigateTo(`/tour/${tour.id}`)">Подробнее</Button>
      </CardFooter>
    </Card>
  </div>
</main>
</template>

<style scoped>

</style>